import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Platform,
  TouchableOpacity,
} from 'react-native';
import NavCon from '../Public/NavCon';
import PxToDp from '../../utils/PxToDp';
import FilterBtn from './FilterBtn';
import { fetchOtherList } from '../../actions/SaleListActions';
import { fetchFilterOther } from '../../actions/SaleChanceFilterAction';
import FontFamilys from '../../utils/FontFamilys';

class OtherCustomerFilter extends Component {
  constructor(props) {
    super(props);
    const FilterObjOther = this.props.FilterObjOther;
    if (FilterObjOther) {
      this.state = {
        words: FilterObjOther.voice === 1,
        driver: FilterObjOther.driver === 1,
        collect: FilterObjOther.collect === 1,
        desc: FilterObjOther.intention === 1, // 降序
        asce: FilterObjOther.intention === 2, // 升序
      };
    } else {
      this.state = {
        words: false,
        driver: false,
        collect: false,
        desc: false, // 降序
        asce: false, // 升序
      };
    }
  }
  _goBack() {
    this.props.navigator.pop();
  }
  toggleSelect = (name, state) => {
    switch (name) {
      case 'words':
        this.setState({ words: !state });
        break;
      case 'driver':
        this.setState({ driver: !state });
        break;
      case 'collect':
        this.setState({ collect: !state });
        break;
      case 'desc':
        this.setState({ desc: !state });
        this.setSelectIntention(0);
        break;
      case 'asce':
        this.setState({ asce: !state });
        this.setSelectIntention(1);
        break;
      default:
        break;
    }
  }
  /**
  *购买意向排序单选
  */
  setSelectIntention(intention) {
    if (intention === 0) {
      this.setState({ asce: false });
    } else if (intention === 1) {
      this.setState({ desc: false });
    }
  }
  /**
  *重置
  */
  resetBtn() {
    this.setState({ words: false });
    this.setState({ driver: false });
    this.setState({ collect: false });
    this.setState({ desc: false });
    this.setState({ asce: false });
  }
  /**
  *确定
  */
  confimBtn() {
    let all = 1;
    let voicemsg = 0;
    let testdrive = 0;
    let collect = 0;
    let intention = 0;
    if (this.state.words) {
      voicemsg = 1;
    } else {
      voicemsg = 0;
    }
    if (this.state.driver) {
      testdrive = 1;
    } else {
      testdrive = 0;
    }
    if (this.state.collect) {
      collect = 1;
    } else {
      collect = 0;
    }
    if (voicemsg || testdrive || collect) {
      all = 0;
    }
    if (voicemsg === 0 && testdrive === 0 && collect === 0) {
      all = 1;
    }
    if (this.state.desc) {
      intention = 1;
    } else if (this.state.asce) {
      intention = 2;
    } else {
      intention = 0;
    }
    const { dispatch } = this.props;
    dispatch(fetchOtherList(1, true, false, all, voicemsg, testdrive, collect, intention));
    const FilterObjOther = {
      voice: voicemsg,
      driver: testdrive,
      collect,
      intention,
    };
    dispatch(fetchFilterOther(FilterObjOther)); // 选中的筛选项
    if (navigator) {
      this.props.navigator.pop();
    }
  }
  render() {
    return (
      <View style={[style.wrrap, style.flex]}>
        <View style={{ width: '100%', borderBottomWidth: 1, borderColor: '#ddd' }}>
          <NavCon style={[style.flex, style.top]} backName="" currentTitle="筛选条件" onPress={() => this._goBack()} />
        </View>
        <View style={style.contentTop}>
          <Text style={[style.textColor, style.textFontR, style.titleTwo, style.titleWei]}>
        筛选维度</Text>
          <View style={style.row}>
            <FilterBtn selected={this.state.words} onPress={() => this.toggleSelect('words', this.state.words)}>有留言</FilterBtn>
            <FilterBtn selected={this.state.driver} onPress={() => this.toggleSelect('driver', this.state.driver)}>有试驾申请</FilterBtn>
            <FilterBtn selected={this.state.collect} onPress={() => this.toggleSelect('collect', this.state.collect)}>已收藏</FilterBtn>
          </View>
          <Text style={[style.textColor, style.textFontR, style.titleTwo, style.titleSource]}>
          购买意向排序
        </Text>
          <View style={style.row}>
            <FilterBtn selected={this.state.desc} onPress={() => this.toggleSelect('desc', this.state.desc)}>降序</FilterBtn>
            <FilterBtn selected={this.state.asce} onPress={() => this.toggleSelect('asce', this.state.asce)}>升序</FilterBtn>
          </View>
        </View>
        <View style={[style.row, style.bottomBtn]}>
          <TouchableOpacity
            style={[style.flex, style.btnReset, style.btn]}
            onPress={() => this.resetBtn()}
          >
            <Text style={[style.textFontR, style.titleTwo, style.textColor]}>重置
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[style.flex, style.btnConfim, style.btn]}
            onPress={() => this.confimBtn()}
          >
            <Text
              style={[style.textFontR, style.titleTwo, style.white]}
            >完成
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const style = StyleSheet.create({
  flex: {
    flex: 1,
  },
  wrrap: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
  row: {
    flexDirection: 'row',
  },
  textColor: {
    color: '#000000',
  },
  white: {
    color: '#ffffff',
  },
  textFontR: {
    fontFamily: FontFamilys(),
  },
  titleTwo: {
    fontSize: PxToDp(15),
  },
  titleWei: {
    marginTop: PxToDp(30),
  },
  titleSource: {
    marginTop: PxToDp(25),
  },
  contentTop: {
    paddingLeft: PxToDp(12),
    paddingRight: PxToDp(8),
    flex: 5,
  },
  bottomBtn: {
    height: PxToDp(50),
    flex: 1,
    alignItems: 'flex-end',
  },
  btn: {
    height: PxToDp(50),
    alignItems: 'center',
    justifyContent: 'center',
    borderTopWidth: PxToDp(1),
    borderStyle: 'solid',
    borderColor: '#b7b7b7',
  },
  btnReset: {
    backgroundColor: '#ffffff',
  },
  btnConfim: {
    backgroundColor: '#458fff',
  },
});

export default OtherCustomerFilter;
